<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slider with multi handle</title>
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/resources/css/style.css">
<script src="<c:url value="/resources/js/jquery-1.7.2.min.js" />" /></script>
<style>
.demoarea {
	color: sienna;
	background-image: url("images/background.gif");
	width: 300px;
	margin-left: 280px;
	margin-top: 30px;
}
</style>
</head>
<body>

	<div class="demoarea">
	<label style="border: 0; color: red; font-weight: bold;margin-left: 100px">Slider with one handle</label>
		<p>
			<label for="amount">Number of stops:</label> <input type="text"
				id="numStop" style="border: 0; color: #f6931f; font-weight: bold;" value="1">
		</p>
		<div id="slider" style="margin-bottom: 50px; margin-top: 20px"></div>
		<label style="border: 0; color: red; font-weight: bold;margin-left: 100px">Slider with two handle</label>
		<p>
			<label for="amount">Departure Time:</label> <input type="text"
				id="amount" style="border: 0; color: #f6931f; font-weight: bold;" value="0h0 - 23h59">
		</p>
		<div id="multislider"></div>
		<%-- 	<form:form --%>
		<%-- 		action="${pageContext.request.contextPath}/demo/multislider.html" --%>
		<%-- 		method="POST"> --%>
		<!-- 		<input type="text" id="time" hidden name="time" value=${time}> -->
		<!-- 		<button class="btn btn-success" id="submit">Submit</button> -->
		<%-- 	</form:form> --%>
	</div>

	<script>
		$(document).ready(function() {
			$(this).find(".ui-slider-handle").removeClass("ui-state-default");
			$("#slider").hover(function() {
				var obj = $(this).find(".ui-slider-handle");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
			});
			$("#slider").mousedown(function() {
				var obj = $(this).find(".ui-slider-handle");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
			});
			$("#slider").mousemove(function() {
				var obj = $(this).find(".ui-slider-handle");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
				obj.removeClass("ui-state-default");
				obj.css("outline", "none");
			});
		});

		jQuery.noConflict();
		$(document).ready(function() {

			//Store frequently elements in variables
			var slider = $('#slider');

			//Call the Slider
			slider.slider({
				//Config
				range : "min",
				min : 0,
				max : 3,
				value : 1,
				slide : function(event, ui) {
					var valueSpan = ui.value;
					if (valueSpan == 0) {
						$('#lblnumStop').text(valueSpan + " (direct)");
					} else if (valueSpan == 1) {
						$('#lblnumStop').text(valueSpan + " stop");
					} else if (valueSpan == 2) {
						$('#lblnumStop').text(valueSpan + "+ (any)");
					}

					$('#numStop').val(valueSpan);
				}

			});
		});
	</script>
	<script>
		$(window).load(function() {
			handle = $('#multislider A.ui-slider-handle');
			handle.eq(0).addClass('ui-slider-handle-left');
			handle.eq(1).addClass('ui-slider-handle-right');
		});

		$(function() {
			$("#multislider").slider(
					{
						range : true,
						min : 0,
						max : 1439,
						values : [ 0, 1439 ],
						slide : function(event, ui) {
							$("#amount").val(
									convertToTime(ui.values[0]) + " - "
											+ convertToTime(ui.values[1]));
							$("#time").val(ui.values[0] + "-" + ui.values[1]);
						}
					});

		});
		function convertToTime(val) {
			var mins = val % 60;
			var housr = Math.floor(val / 60);
			return housr + "h" + mins;
		}
		$(document).ready(function() {
			$(this).find(".ui-slider-handle").removeClass("ui-state-default");
			$("#multislider").hover(function() {
				var obj = $(this).find(".ui-slider-handle-left");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
			});
			$("#multislider").mousedown(function() {
				var obj = $(this).find(".ui-slider-handle-left");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
			});
			$("#multislider").mousemove(function() {
				var obj = $(this).find(".ui-slider-handle-left");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
				obj.css("outline", "none");
			});
			$("#multislider").hover(function() {
				var obj = $(this).find(".ui-slider-handle-right");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
			});
			$("#multislider").mousedown(function() {
				var obj = $(this).find(".ui-slider-handle-right");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
			});
			$("#multislider").mousemove(function() {
				var obj = $(this).find(".ui-slider-handle-right");
				obj.removeClass("ui-state-hover");
				obj.removeClass("ui-state-focus");
				obj.removeClass("ui-state-active");
				obj.css("outline", "none");
			});
			// 			$("#submit").click(function(){
			// 				alert("Duration:");
			// 			});
		});
	</script>

</body>
</html>